/**************************************************************************************** Import */
import _ from 'lodash';
import React, {Component} from 'react';
import {View} from 'react-native';
import { Icon, List, InputItem, Tabs, Button } from 'antd-mobile-rn';
import ScrollableTabView, { ScrollableTabBar, DefaultTabBar } from 'react-native-scrollable-tab-view';
import { CAround, CBetween, CCenter, CColumn, CFloat, CHand, CItemX, CItemY, CLine, CLoad, CRow, CWrap, CBone, CIcon, CImage, CSvg, CText, CFull, CScroll, CFooter, CHeader, CPage, CButton, CLabel, PTabbar, PHeader, PCustumTabBar } from '../../../library/comp';
import { Dialog, Http, PageBase }  from '../../../library/func';
import Design from '../../../design';
import Config from '../../../config';

/**************************************************************************************** Pageload */

/**************************************************************************************** Cacheload */

/**************************************************************************************** Preload */

/**************************************************************************************** Get */

/**************************************************************************************** Post */

/**************************************************************************************** Page */
export default class ServiceGateway extends PageBase {
	constructor(props){
		super(props)
		this.state = {
			
		}
    }

	/************************************************************************************ Func */
	// 一键开门
	open(){
		Dialog.loading('正在开门',5)
	}

	/************************************************************************************ Render */
	render() {
		
		return (
			<CPage>

				<CFull f='1' bg='#efeff4' mt='96'>
					<ScrollableTabView
						tabBarActiveTextColor='#26c75e'
						style={{justifyContent:'center',backgroundColor:'#efeff4'}}
						tabBarUnderlineStyle={{backgroundColor:'#26c75e',width:'16%',left:'17%',height:2}}
						initialPage={0}
    					renderTabBar={(e) => <PCustumTabBar style={{height:30,borderBottomColor:'transparent',borderBottomWidth:0,backgroundColor:'#fff',paddingTop:10}} ></PCustumTabBar>}
					>

						{/* 小区门禁 */}
						<CColumn tabLabel='小区门禁' mx='60' ra='4' h='304' f='0' mt='40' pb='0' style={{width:Config.map.screen.width-60}} >
							<CColumn pa='30' pb='45' mb='120' bg='#fff'>{/* pb 控制与一键开门的距离，mb为一键开门按钮的高度 */}
								

								{/* 选择小区 */}
								<CRow mt='15' bb='2 #fff' pb='10'>
									<CHand f='1' y='center'>
										<CIcon width="16" height="16" color="#999" icon={ Design.icon["index-location"] }></CIcon>
										<CText size='26' color='#5e5e5e'> 保定珑城花园小区</CText>
										{/* <CIcon width="16" height="16" color="#999" icon={ Design.icon["make-right"] }></CIcon> */}
									</CHand>
								</CRow>

								<CRow mt='12'>
									<CText color='#d7d7d7' size='23' pl='5'>请您保持在门禁5米内的位置</CText>
								</CRow>
							</CColumn>

							{/* 一键开门按钮 */}
							<CColumn abs bottom='0' style={{width:'100%'}} >
								<CButton {...Design.global.commonButton} py='15' size='28' onPress={e=>this.open()}>一键开门</CButton>
							</CColumn>
						</CColumn>

						{/* 楼宇门禁 */}
						<CHand tabLabel='楼宇门禁' bg='#fff' mx='60' h='304' mt='40' x='center' pt='30' style={{borderTopLeftRadius:2,borderTopRightRadius:2}}><CText color='#666'>暂未开启此功能</CText></CHand>
						
					</ScrollableTabView>
				</CFull>
				
                {/* header */}
				<PHeader nav={this.nav}>一键开门</PHeader>

			</CPage>
		);
	}
}
